import React, { memo } from "react";
import { useState } from "react";
import { Grid, List } from "antd-mobile";
import AvatarSelectorWrapper from "./style.js";
const AvatarSelector = memo((props) => {
  let [select, setSelect] = useState({});
  let { updateUserInfo } = props;

  const avatarList = [...Array(15).keys()].map((item, index) => ({
    icon: require(`../img/${index + 1}.png`),
    text: index + 1,
  }));

  function chooseAvatar(item) {
    setSelect({ icon: item.icon });
    updateUserInfo("avatar", item.text);
  }

  const header = select.icon ? (
    <div>
      <div>
        <span>已选择的头像是 :</span>
        <img style={{ width: 25, marginLeft: 10 }} src={select.icon} alt="" />
      </div>
    </div>
  ) : (
    "请选择头像"
  );

  return (
    <AvatarSelectorWrapper>
      <List header={header}>
        <List.Item>
          <Grid columns={5} gap={8}>
            {avatarList.map((item) => {
              return (
                <Grid.Item key={item.text}>
                  <img
                    src={item.icon}
                    alt=""
                    style={{
                      width: 30,
                      display: "inline-block",
                    }}
                    onClick={() => {
                      chooseAvatar(item);
                    }}
                  />
                </Grid.Item>
              );
            })}
          </Grid>
        </List.Item>
      </List>
    </AvatarSelectorWrapper>
  );
});

export default AvatarSelector;
